import React from 'react'
import { 
  Button,
  Grid
} from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import UserRoleDisplay from '../../components/UserRoleDisplay'
import './index.css'

function Mine() {
  const navigate = useNavigate()

  const goToFollowedDoctors = () => {
    navigate('/followed-doctors')
  }

  return (
    <div className="mine-container">
      {/* 蓝色头部区域 */}
      <div className="blue-header">
        <div className="header-title">我的工作室</div>
        
        <div className="header-actions">
          <Button className="header-action-btn">扫一扫</Button>
          <Button className="header-action-btn">妙手客服</Button>
        </div>
        
        <div className="profile-section">
          <div className="profile-left">
            <div className="profile-avatar">👨‍⚕️</div>
            <div className="profile-info">
              <div className="name-row">
                <span className="doctor-name">杨*淮</span>
                <span className="cert-tag">已认证</span>
                <UserRoleDisplay />
              </div>
              <div className="specialty">消化内科 | 主治医师</div>
            </div>
          </div>
          <div className="homepage-btn">
            我的主页 &gt;
          </div>
        </div>
      </div>

      {/* 白色内容区域 */}
      <div className="white-content">
      
      

        {/* 消息卡片 */}
        <div className="message-card">
          <div className="message-avatar">👤</div>
          <div className="message-content">
            <div className="message-text">
              患者"刘**"给您写了感谢信:非常感谢医生帮助我...
            </div>
          </div>
          <div className="unread-dot"></div>
        </div>

        {/* 活动卡片 */}
        <div className="activity-section">
          <div className="activity-card left">
            <div className="card-badge">12</div>
            <div className="card-icon">📧</div>
            <div className="card-content">
              <div className="card-title">最新活动</div>
              <div className="card-subtitle">现金红包等你拿</div>
            </div>
          </div>
          
          <div className="activity-card right">
            <div className="card-tag">今日未签</div>
            <div className="card-icon">📅</div>
            <div className="card-content">
              <div className="card-title">每日签到</div>
              <div className="card-subtitle">累计签到112天</div>
            </div>
          </div>
        </div>

        {/* 功能网格 */}
        <div className="function-grid-card">
          <div className="card-title-section">
            <h3>快捷功能</h3>
          </div>
          <div className="grid-container">
            <div className="grid-item">
              <div className="grid-icon">💊</div>
              <div className="grid-text">用药建议</div>
            </div>
            <div className="grid-item">
              <div className="grid-icon">🏥</div>
              <div className="grid-text">我的药房</div>
            </div>
            <div className="grid-item" onClick={goToFollowedDoctors}>
              <div className="grid-icon">👥</div>
              <div className="grid-text">我的关注</div>
            </div>
            <div className="grid-item" onClick={() => navigate('/permission-test')}>
              <div className="grid-icon">🔒</div>
              <div className="grid-text">权限测试</div>
            </div>
            <div className="grid-item" onClick={() => navigate('/change-password')}>
              <div className="grid-icon">🔐</div>
              <div className="grid-text">修改密码</div>
            </div>
            <div className="grid-item">
              <div className="grid-icon">📱</div>
              <div className="grid-text">患者报到码</div>
            </div>
            <div className="grid-item">
              <div className="grid-icon">💬</div>
              <div className="grid-text">问诊设置</div>
            </div>
            <div className="grid-item">
              <div className="grid-icon">📍</div>
              <div className="grid-text">报到设置</div>
            </div>
            <div className="grid-item">
              <div className="grid-icon">👍</div>
              <div className="grid-text">优选药房</div>
            </div>
            <div className="grid-item">
              <div className="grid-icon">👥</div>
              <div className="grid-text">我的团队</div>
            </div>
          </div>
        </div>

        {/* 问诊室 */}
        <div className="consultation-card">
          <div className="card-header">
            <h3>我的接诊室</h3>
            <div className="performance-metrics">
              <span className="metric">好评率100%</span>
              <span className="metric">感谢信 24</span>
              <span className="metric">锦旗 18</span>
            </div>
          </div>
          
          <Grid columns={4} gap={12}>
            <Grid.Item>
              <div className="grid-item">
                <div className="grid-icon">💬</div>
                <div className="grid-text">图文咨询</div>
              </div>
            </Grid.Item>
            <Grid.Item>
              <div className="grid-item">
                <div className="grid-icon">📞</div>
                <div className="grid-text">电话咨询</div>
              </div>
            </Grid.Item>
            <Grid.Item>
              <div className="grid-item">
                <div className="grid-icon">📹</div>
                <div className="grid-text">视频咨询</div>
              </div>
            </Grid.Item>
            <Grid.Item>
              <div className="grid-item">
                <div className="grid-icon">👍</div>
                <div className="grid-text">优选小店</div>
              </div>
            </Grid.Item>
          </Grid>
        </div>

        {/* 网络问诊抢单池 */}
        <div className="order-pool-card">
          <div className="order-pool-content">
            <div className="order-pool-info">
              <h3>网络问诊抢单池</h3>
              <p>快速抢单,赚知识费</p>
            </div>
            <Button className="grab-btn">
              立即抢题
            </Button>
          </div>
        </div>

        {/* 待处理任务 */}
        <div className="pending-tasks-card">
          <div className="card-title-section">
            <h3>待处理任务</h3>
          </div>
          
          <div className="tasks-tabs">
            <div className="tab-item active">
              <span className="tab-text">问诊待处理</span>
            </div>
            <div className="tab-item">
              <span className="tab-text">消息待回复</span>
            </div>
            <div className="tab-item">
              <span className="tab-text">复诊待开方</span>
            </div>
          </div>
          
          <div className="tasks-tabs">
            <div className="tab-item">
              <span className="tab-text">新患者</span>
            </div>
            <div className="tab-item">
              <span className="tab-text">门诊待接诊</span>
            </div>
            <div className="tab-item">
              <span className="tab-text">患者待接诊</span>
              <span className="team-tag">团队</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Mine
